<template>
  <div
    :style="{
      width: width,
      height: height,
    }"
    ref="echartsRef"
  />
</template>

<script setup lang="ts">
import { ref, onMounted, watch, PropType } from 'vue'
import { useEcharts, EChartsCoreOption } from '@/hooks/useEcharts' // 引入hooks
import { MapParams } from './config'

const props = defineProps({
  options: { type: Object as PropType<EChartsCoreOption>, required: true },
  height: { type: String, default: '100%' },
  width: { type: String, default: '100%' },
  themeColors: { type: Array as PropType<string[]>, default: () => [] },
  map: { type: Object as PropType<MapParams>, default: () => {} },
})

const echartsRef = ref()

const { setOptions, initCharts } = useEcharts(
  echartsRef,
  props.options,
  props.map
)

watch(
  () => props.options,
  (nVal) => {
    let targetOptions: EChartsCoreOption = {}
    if (props.themeColors && props.themeColors.length > 0) {
      targetOptions = { ...nVal }
      targetOptions.color = props.themeColors
    } else {
      targetOptions = { ...nVal }
    }
    setOptions(targetOptions)
  }
)

onMounted(() => {
  initCharts()
})
</script>
